<template>
    <div>
        <Tags :tag-list="tagList" :options="options" :is-fetching="isFetching"></Tags>
        <Articles :article-list="articleList" :is-edit="options.isEdit"></Articles>
        <Loadmore v-if="articleList.length>0 && isMore" :options="options" :is-more="isMore" :is-fetching="isFetching"></Loadmore>
    </div>
</template>
<style>
    
</style>
<script>
    import Tags from '../Home/tags.vue'
    import Articles from '../Home/articles.vue'
    import Loadmore from '../Home/loadmore.vue'
    import {getTagList,getArticleList,changeOptions} from '../../vuex/actions'
    export default{
        data(){
            return{
                msg:'hello vue'
            }
        },
        components:{
            Tags,
            Articles,
            Loadmore
        },
        created(){
            if(this.tagList.length < 1){
                this.getTagList()
            }
            this.changeOptions({'userId':this.user._id,'isEdit':true})
            this.getArticleList(this.options)
        },
        methods:{
            handleChange(options,isAdd=false){
                this.changeOptions(options)
                this.getArticleList(this.options, isAdd)
            }
        },
        vuex:{
            getters:{
                tagList: ({tagList}) => tagList.items ,
                articleList: ({articleList}) => articleList.items,
                options: ({options}) => options.item,
                isMore: ({articleList}) => articleList.isMore,
                isFetching: ({articleList}) => articleList.isFetching,
                user:({auth}) => auth.user
            },
            actions:{
                getTagList,
                getArticleList,
                changeOptions
            }
        }
    }
</script>
